<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长情传送门</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <script src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/css/swiper-4.3.3.min.css">
</head>
<body>
<audio src="__PUBLIC__/mp3/片头 8.mp3" loop="loop" preload="auto" id="bgMusic"></audio>
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_four"></div>
        </div>
    </div>
</div>
<div class="question-page swiper-container" style="display: none">
    <div class="swiper-wrapper">
        <div class="question-1 swiper-slide question">
            <div class="question-text">
                <div class="bg"></div>
                <div class="text">
                    1、 你最在意另一半的特质是什么？
                </div>
            </div>
            <div class="answers" data-index="1" style="width: 53vw;">
                <ul>
                    <li>A：衣品人品，品品皆佳</li>
                    <li>B：读过万卷书，行过万里路</li>
                    <li>C：看脸</li>
                </ul>
            </div>
            <!--<div class="btn next" data-index="1">-->
                <!--<span>下一题</span>-->
            <!--</div>-->
        </div>
        <div class="question-2 swiper-slide question">
            <div class="question-text">
                <div class="bg"></div>
                <div class="text">
                    2、面对生活繁杂琐事，如果TA过于佛（撒）系（手）对（不）待（管），你会。。。。
                </div>
            </div>
            <div class="answers" data-index="2" style="width: 64vw;">
                <ul>
                    <li>A：要你何用，分手过大年</li>
                    <li> B：正合我意，我喜欢说了
                        算的感觉</li>
                    <li>C：我也挺佛系的</li>
                </ul>
            </div>
            <!--<div class="btn next" data-index="2">-->
                <!--<span>下一题</span>-->
            <!--</div>-->
        </div>
        <div class="question-3 swiper-slide question">
            <div class="question-text">
                <div class="bg"></div>
                <div class="text">
                    3、不考虑经济压力，你最期待的家的样子是什么样的？
                </div>
            </div>
            <div class="answers" data-index="3" style="width: 60vw;">
                <ul>
                    <li>A：宠物地上爬，孩子床上跳</li>
                    <li> B：风格清新，仿佛置身森林</li>
                    <li>C：即使三十年后，依然崭新
                        明亮</li>
                </ul>
            </div>
            <!--<div class="btn next" data-index="3">-->
                <!--<span>下一题</span>-->
            <!--</div>-->
        </div>
        <div class="question-4 swiper-slide question">
            <div class="question-text">
                <div class="bg"></div>
                <div class="text">
                    4、如果有一栋新房要你装修，你会先做什么？
                </div>
            </div>
            <div class="answers" data-index="4" style="width: 50vw;">
                <ul>
                    <li>A：样板房看上一万间</li>
                    <li>B：明星同款就是对的</li>
                    <li>C：TA说了算</li>
                </ul>
            </div>
            <!--<div class="btn next" data-index="4">-->
                <!--<span>下一题</span>-->
            <!--</div>-->
        </div>
        <div class="question-5 swiper-slide question">
            <div class="question-text">
                <div class="bg"></div>
                <div class="text">
                    5、作为最大面积软装，哪款底板是你会pick的款？
                </div>
            </div>
            <div class="answers" data-index="5" style="width: 50vw;">
                <ul>
                    <li>A：低饱和色百搭</li>
                    <li>B：耐刮耐水耐磨损</li>
                    <li>C：质感高级，样式经典</li>
                </ul>
            </div>
            <!--<div class="btn end" data-index="5">-->
                <!--<span>生成专属海报</span>-->
            <!--</div>-->
        </div>
    </div>
</div>
<script src="__PUBLIC__/js/swiper-4.3.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{:session("appId")}', // 必填，公众号的唯一标识
        timestamp:'{:session("timestamp")}', // 必填，生成签名的时间戳
        nonceStr: '{:session("nonceStr")}', // 必填，生成签名的随机串
        signature: '{:session("signature")}',// 必填，签名
        jsApiList: ["onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '长情传送门', // 分享标题
            desc: "原来你的爱情是这样的", // 分享描述
            link: window.origin, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:"http://qixi.yingqutv.com/static/front/img/shareweixin.jpg", // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            },
            cancel: function () {
            }
        });
    });
</script>
<script type="text/javascript">
	function audioAutoPlay(id) {
		var audio = document.getElementById(id),
			play = function () {
				audio.play();
				document.removeEventListener("touchstart", play, false);
			};
		audio.src='__PUBLIC__/mp3/片头 8.mp3';
		audio.load();
		audio.play();
		document.addEventListener("WeixinJSBridgeReady", function () {
			play();
		}, false);
		document.addEventListener('YixinJSBridgeReady', function () {
			play();
		}, false);
		document.addEventListener("touchstart", play, false);
	}
	audioAutoPlay("bgMusic")
	var mySwiper
    window.onload=function(){
		$("#loading").hide()
		$(".question-page").show()
		mySwiper= new Swiper('.swiper-container', {
			direction: 'vertical',
			loop: false,
			autoplay:false,
			allowTouchMove:false
		})
    }
	$(function () {
		$(".answers li").click(function () {
			$(".answers li").removeClass("active")
			$(this).addClass("active")
			var index=$(this).parents(".answers").data("index")
            console.log(index)
			if(index<5){
				mySwiper.slideNext();
			}else{
				location.href="{:url('index/index/share')}"
			}
		})
	})
</script>
</body>
</html>
